<!--
 * @Author: zhangyang
 * @Date: 2022-03-09 17:54:04
 * @LastEditTime: 2022-05-07 11:56:14
 * @Description: 基础表格组件
-->
<script lang="ts" setup>
import type { TableDataItem, TableHeadItem, TableSize } from '@/typings/table';

type Props = {
  bottomBordered?: boolean;
  bordered?: boolean;
  singleColumn?: boolean;
  singleLine?: boolean;
  size?: TableSize;
  striped?: boolean;
  tableHead?: TableHeadItem[];
  tableData?: TableDataItem[];
};
const props = withDefaults(defineProps<Props>(), {
  bottomBordered: true,
  bordered: true,
  singleColumn: false,
  singleLine: true,
  size: 'medium',
  striped: false,
  tableHead: () => [],
  tableData: () => []
});
</script>
<template>
  <div>
    <NTable
      :bottomBordered="bottomBordered"
      :borderd="bordered"
      :singleColumn="singleColumn"
      :singleLine="singleLine"
      :size="size"
      :striped="striped"
    >
      <NThead>
        <NTr>
          <NTh
            v-for="(item, index) in tableHead"
            :key="index + 'fsercseu'"
            :style="{ width: item.width ?? '' }"
          >{{ item.label }}</NTh>
        </NTr>
      </NThead>
      <NTbody>
        <NTr v-for="(item, index) in tableData" :key="index + 'fyeiruy'">
          <NTd
            v-for="(it, idx) in tableHead"
            :key="idx + 'fasuecey'"
          >{{ item[String(it.prop)] }}</NTd>
        </NTr>
      </NTbody>
    </NTable>
  </div>
</template>